<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>聊天测试</title>
	 <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link href="bootstrap.css" rel="stylesheet">
    <style>
        body {
            padding: 20px;
        }
        #console {
            height: 400px;
            overflow: auto;
        }
        .username-msg {
            color: orange;
        }
        .connect-msg {
            color: green;
        }

        .disconnect-msg {
            color: red;
        }

        .send-msg {
            color: #888
        }
    </style>

    <script src="js/socket.io/socket.io.js"></script>
    <script src="js/moment.min.js"></script>
	<script src="layui/layui.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        //开启调试socketIO debug信息
        localStorage.debug = '*';

        var userName = 'user' + Math.floor((Math.random() * 1000) + 1);
        var socket = io.connect('http://localhost:9527?token=wangkun');
		/**
		* 初始化连接成功后发送的消息
		**/
        socket.on('connect', function () {
            var user = {
                username: "zhangsan224",
                rank: "0",
                roomId: "7433"
            };
            socket.emit("joinRoom", user);
            output('<span class="connect-msg">已经连接到服务器!</span>');
        });
        
		/**
		*获得消息的回调
		**/
        socket.on('message', function (data) {
            output('<span class="username-msg">' + data.createTime + '+' + data.username + '+' + data.msgType + ':</span> ' + data.msgContent);
        });

       /**
		*断开连接的回调
		**/
        socket.on('disconnect', function () {
            output('<span class="disconnect-msg">客户端失去连接!</span>');
        });

        function sendDisconnect() {
            socket.disconnect();
        }
         
        function sendMessage() {
            var message = $('#msg').val();
            $('#msg').val('');

            var jsonObject = {
                userName: userName,
                msgContent: message
            };
            socket.emit('message', jsonObject);
        }

        function output(message) {
            var currentTime = "<span class='time'>" + moment().format('HH:mm:ss.SSS') + "</span>";
            var element = $("<div>" + currentTime + " " + message + "</div>");
            $('#console').prepend(element);
        }

		function sendactite(){
			 var user = {
                username: "zhangsan224",
                rank: "0",
                roomId: "7433"
            };
            socket.emit("actite", user);

		}

        $(document).keydown(function (e) {
            if (e.keyCode == 13) {
                $('#send').click();
            }
        });




		//演示代码
layui.use('layim', function(layim){
  var layim = layui.layim;
  layim.config({
    init: {
      //配置客户信息
      mine: {
        "username": "访客" //我的昵称
        ,"id": "100000123" //我的ID
        ,"status": "online" //在线状态 online：在线、hide：隐身
        ,"remark": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
        ,"avatar": "images/header.png" //我的头像
      }
    }
    //开启客服模式
    ,brief: true
  });
  //打开一个客服面板
  layim.chat({
    name: '在线客服一' //名称
    ,type: 'kefu' //聊天类型
    ,avatar: 'images/kefu.png' //头像
    ,id: 1111111 //定义唯一的id方便你处理信息
  }).chat({
    name: '在线客服二' //名称
    ,type: 'kefu' //聊天类型
    ,avatar: 'images/kefu.png' //头像
    ,id: 2222222 //定义唯一的id方便你处理信息
  });
  layim.setChatMin(); //收缩聊天面板
});

    </script>
</head>
<body>
<h1>聊天测试</h1>
<br/>
<div id="console" class="well">
</div>

<form class="well form-inline" onsubmit="return false;">
    <input id="msg" class="input-xlarge" type="text" placeholder="输入聊天信息"/>
    <button type="button" onClick="sendMessage()" class="btn" id="send">发送</button>
    <button type="button" onClick="sendDisconnect()" class="btn">断开连接</button>
	 <button type="button" onClick="sendactite()" class="btn">测试自定义事件</button>
</form>

</body>

</html>
